import React, { useEffect } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Button, message, Input, Drawer } from 'antd';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import FilterSearch from '@/components/FilterSearch';
import TableList from '@/components/TableList';
import { timeFormat } from '@/utils/common';
import { Link } from 'umi';

const ErrorList = () => {
  const filters = [
    {
      key: 'user_id',
      type: 'input',
      label: '用户',
    },
    {
      key: 'url_path',
      type: 'input',
      label: '页面路径',
    },
  ];
  const columns = [
    {
      title: 'appId',
      dataIndex: 'app_id',
    },
    {
      title: 'userId',
      dataIndex: 'user_id',
    },
    {
      title: '时间',
      dataIndex: 'create_time',
      format: 'YYYY-MM-DD',
    },
    {
      title: '请求时长',
      dataIndex: 'duration',
      width: 300,
    },
    {
      title: '请求地址',
      dataIndex: 'url',
      width: 400,
    },
    {
      title: '路径',
      dataIndex: 'url_path',
    },
    {
      title: '会话ID',
      dataIndex: 'mark_user',
    },
    {
      title: '访问路径',
      dataIndex: 'mark_user',
      render: (text) => text && <Link to={`/visit-list?mark_user=${text}`}>访问路径</Link>,
    },
  ];
  const dataRender = (list) => {
    return list.map((item) => {
      item.create_time = timeFormat(new Date(item.create_time));
      item.duration = item.duration + ' ms';
      return item;
    });
  };
  return (
    <PageContainer>
      <FilterSearch filters={filters}></FilterSearch>
      <TableList
        post
        rowKey="id"
        columns={columns}
        source="/api/monitor/admin/ajax_list"
        dataRender={dataRender}
      />
    </PageContainer>
  );
};

export default ErrorList;
